<template>
  <div>
    <!-- Form 表单 -->
    <Card>
      <Form ref="formItem" :rules="qualityRules" :model="formItem" style="display: block;">
        <Row>
          <i-col span="5">
            <DatePicker
              v-model="formItem.yearMonth"
              type="month"
              placeholder="统计年月"
              :editable="false"
              style="width:100%"
              :options="dateOptions"
              @on-change="dateChange"
            ></DatePicker>
          </i-col>
          <i-col span="5" style="margin: 0 30px;">
            <FormItem prop="organization">
              <Cascader change-on-select :data="organizationList" v-model="formItem.organization" style="width: 100%;" @on-change="organizationChange" placeholder="续期专员机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem prop="name">
              <Select v-model="formItem.name" placeholder="续期专员姓名" clearable style="width: 100%;">
                <Option
                  v-for="item in reagentNameList"
                  :key="item.key"
                  :value="item.key"
                >{{item.value}}-{{item.key}}</Option>
              </Select>
            </FormItem>
          </i-col>
        <!-- </Row>
        <Row gutter="30"> -->
          <i-col span="7">
            <Button
              type="primary"
              class="resetButton"
              @click="submitForm"
              :loading="queryLoading"
              style="margin-left: 30px;"
            >查询</Button>
            <Button class="resetButton" @click="resetForm" style="margin: 0 10px;">重置</Button>
            <Button type="primary" class="resetButton" @click="modalDet=true">配置星级标准</Button>
          </i-col>
        </Row>
      </Form>
    </Card>

    <!-- 数据表格 -->
    <div :class="minHeight==true?'minheight':''" ref="tableCardHeight">
      <Card class="tableCard">
        <Table :columns="qualityColumns" :data="qualityData">
          <!-- <template slot-scope="{row}" slot="imgUrl">
            <p style="height: 80px;line-height:80px;">
              <img :src="row.imgUrl" alt style="width:60px;height:60px;" />
            </p>
          </template> -->
          <template slot-scope="{row}" slot="info">
            <p style="height:30px;line-height:30px;">{{row.info.name}}-{{row.info.code}}</p>
            <p style="height:30px;line-height:30px;">{{row.info.comp}}</p>
          </template>
          <template slot-scope="{row}" slot="yearMonth">
            <span>{{row.yearMonth?row.yearMonth.substr(0,4):''}}年{{row.yearMonth?row.yearMonth.substr(5,6):''}}月</span>
          </template>
          <template slot-scope="{row}" slot="score">
            <div
              :class="{'scoreAct1':row.score>row.star,'scoreAct2':row.score<row.star}"
              style="width:45px;height:45px; line-height:45px; border-radius:50%; text-align:center; font-size:14px; display:inline-block; margin:auto;"
            >{{row.score}}</div>
          </template>
          <template slot-scope="{row}" slot="option">
            <a href="#" @click="detail(row)" class="btn-detail">查看详情</a>
          </template>
        </Table>
        <!-- 分页 -->
        <Row>
          <i-col span="24" style="text-align:right;margin-top:20px;margin-bottom:40px;">
            <Page
              :total="total"
              show-total
              show-sizer
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              :page-size-opts="pageSizeOptions"
            />
          </i-col>
        </Row>
      </Card>
    </div>

    <Modal
      v-model="modalDet"
      class-name="vertical-center-modal"
      :mask-closable="false"
      footer-hide="true"
      width="480"
      closable
    >
      <span slot="header" style="color:#fff; font-size:16px;">配置星级标准</span>
      <div style="width:100%; margin:80px 0 20px 60px;">
        <Form ref="modalVa" :model="modalValdate" label-width="130" :rules="ruleValdate" style="display: block;">
          <Row>
            <!-- <i-col span="5" style="height:32px; line-height:32px; font-size:16px;">配置星级标准：</i-col> -->
            <!-- <i-col span="18"> -->
              <FormItem prop="changeStarScore" label="配置星级标准">
                <Input
                  type="text"
                  style="width: 200px;"
                  v-model="modalValdate.changeStarScore"
                  placeholder="请输入星级标准"
                />
              </FormItem>
            <!-- </i-col> -->
          </Row>
          <Row style="width:100%; text-align:right; margin-top:20px;">
            <i-col span="20">
              <Button type="primary" style="margin-right:20px;" @click="btnSubmit">确定</Button>
              <Button @click="btnCancel">取消</Button>
            </i-col>
          </Row>
        </Form>
      </div>
    </Modal>

    <Button type="primary" @click="info" v-if="false"></Button>
  </div>
</template>


<script>
export default {
  data() {
    // 星级标准为正整数
    const validateStar = (rule, value, callback) => {
      // console.log(value)
      let scopeReg = /^[1-9]\d*$/;
      if (value && !scopeReg.test(value)) {
        callback(new Error("星级标准必须输入正整数"));
      } else {
        callback();
      }
    };
    return {
      formItem: {
        yearMonth: null,
        organization: [],
        name: null
      },
      dateOptions: {
        disabledDate(date) {
          return (
            date &&
            (date.valueOf() > Date.now() ||
              date.valueOf() < Date.parse("2019-04"))
          );
        }
      },
      organizationList: [],
      reagentNameList: [],
      qualityColumns: [
        // {
        //   title: "员工信息",
        //   key: "imgUrl",
        //   fixed: "left",
        //   width: 100,
        //   slot: "imgUrl"
        // },
        {
          title: "员工信息",
          key: "info",
          fixed: "left",
          width: 200,
          slot: "info"
        },
        {
          title: "品质年月",
          key: "yearMonth",
          slot: "yearMonth",
          align: "center",
          width: 120
        },
        {
          title: "本月星级标准",
          key: "star",
          align: "center",
          width: 120
        },
        {
          title: "客户投诉",
          key: "clientComplain",
          align: "center",
          width: 120
        },
        {
          title: "服务品质",
          key: "serviceQuality",
          align: "center",
          width: 120
        },
        {
          title: "工作态度",
          key: "attitude",
          align: "center",
          width: 120
        },
        {
          title: "其他",
          key: "other",
          align: "center",
          width: 120
        },
        {
          title: "出勤状况",
          key: "outState",
          align: "center",
          width: 120
        },
        {
          title: "人员质量",
          key: "personQuality",
          align: "center",
          minWidth: 140
        },
        {
          title: "综合得分",
          key: "score",
          align: "center",
          fixed: "right",
          width: 160,
          slot: "score"
        },
        {
          title: "操作",
          key: "option",
          align: "center",
          fixed: "right",
          width: 160,
          slot: "option"
        }
      ],
      qualityData: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [5, 10, 15, 20],
      modalDet: false,
      queryLoading: false,
      ruleValdate: {
        changeStarScore: [
          { required: true, message: "星级标准分数不能为空", trigger: "blur" },
          { validator: validateStar, trigger: "blur" },
          { validator: validateStar, trigger: "change" }
        ]
      },
      modalValdate: {
        changeStarScore: ""
      },
      pageObj: []
    };
  },
  methods: {
    info(tip) {
      this.$Message.info(tip);
    },
    // 改变时间
    dateChange(e) {
      if (this.formItem.yearMonth) {
        this.formItem.yearMonth = e.substr(0, 4) + "-" + e.substr(5, 7);
      }
      // console.log(this.formItem.yearMonth)
    },
    // 获取续期专员机构下拉框信息
    getAllOrganization() {
      // this.api.selectUerList().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
    // 获取续期专员姓名下拉框信息
    organizationChange(value) {
      if (!value) {
        this.reagentNameList = [];
      } else {
        this.api.selectXQCode({ managecom: value[value.length-1] }).then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.reagentNameList = res.data;
            } else {
              this.reagentNameList = [];
            }
            // console.log(res);
          } else {
            this.reagentNameList = [];
            this.$Message.info(res.msg);
          }
        });
      }
    },
    // 查询
    submitForm(t) {
      if (t != 1) {
        this.queryLoading = true;
      }
      let obj = {
        index: 1,
        pageSize: 10,
        managecom: this.formItem.organization[this.formItem.organization.length-1] || '',
        reagentCode: this.formItem.name,
        yearMonth: this.formItem.yearMonth
      };
      this.pageObj = obj;

      this.api.getAllQualityFX(obj).then(res => {
        if (res.code == 200) {
          this.qualityData = [];
          if (res.data) {
            res.data.records.forEach((element, index) => {
              let arr = {
                imgUrl: "",
                info: {
                  name: "",
                  code: "",
                  comp: "",
                  compCode: "",
                  role: ""
                },
                yearMonth: "",
                star: "",
                clientComplain: "",
                serviceQuality: "",
                attitude: "",
                other: "",
                outState: "",
                personQuality: "",
                score: ""
              };
              arr.imgUrl = element.employeeIcon;
              arr.info.name = element.message[0];
              arr.info.code = element.message[1];
              arr.info.comp = element.message[3];
              arr.info.compCode = element.message[2];
              arr.info.role = element.message[4];
              arr.yearMonth = element.yearMonth;
              arr.star = element.starScore;
              arr.clientComplain = element.scoreType1;
              arr.serviceQuality = element.scoreType2;
              arr.attitude = element.scoreType3;
              arr.other = element.scoreType4;
              arr.outState = element.scoreType5;
              arr.personQuality = element.scoreType6;
              arr.score = element.totalScore;

              // console.log(arr);
              this.qualityData.push(arr);
            });

            this.total = res.data.total;
            this.queryLoading = false;
            if (t != 1) {
              this.info(res.msg);
            }
          }
        } else {
          this.queryLoading = false;
          this.info(res.msg);
        }
      });
    },
    // 重置
    resetForm() {
      this.queryLoading = false;
      this.formItem = {
        date: null,
        organization: [],
        name: null
      };
    },
    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.qualityData = [];
      this.api.getAllQualityFX(this.pageObj).then(res => {
        if (res.code == 200) {
          if (res.data) {
            res.data.records.forEach((element, index) => {
              let arr = {
                imgUrl: "",
                info: {
                  name: "",
                  code: "",
                  comp: "",
                  compCode: "",
                  role: ""
                },
                yearMonth: "",
                star: "",
                clientComplain: "",
                serviceQuality: "",
                attitude: "",
                other: "",
                outState: "",
                personQuality: "",
                score: ""
              };
              arr.imgUrl = element.employeeIcon;
              arr.info.name = element.message[0];
              arr.info.code = element.message[1];
              arr.info.comp = element.message[3];
              arr.info.compCode = element.message[2];
              arr.info.role = element.message[4];
              arr.yearMonth = element.yearMonth;
              arr.star = element.starScore;
              arr.clientComplain = element.scoreType1;
              arr.serviceQuality = element.scoreType2;
              arr.attitude = element.scoreType3;
              arr.other = element.scoreType4;
              arr.outState = element.scoreType5;
              arr.personQuality = element.scoreType6;
              arr.score = element.totalScore;

              // console.log(arr);
              this.qualityData.push(arr);
            });

            this.total = res.data.total;
          }
        }
      });
    },
    // 页面切换
    pageChange(index) {
      this.pageIndex = index;
      this.pageSubmit();
    },
    // 每页数量切换
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },
    // 跳转查看详情
    detail(row) {
      this.$router.push({
        // name: "qualityReport",
        path: "qualityReport1",
        query: row
      });
    },
    // 设置星级标准
    btnSubmit() {
      this.$refs.modalVa.validate(valid => {
        if (valid) {
          this.api
            .changeScore({ score: this.modalValdate.changeStarScore })
            .then(res => {
              if (res.code == 200) {
                this.modalDet = false;
                this.submitForm(1);
                this.info(res.msg);
              } else {
                this.modalDet = false;
                this.info(res.msg);
              }
            });
        }
      });
    },
    btnCancel() {
      this.modalValdate.changeStarScore = "";
      this.modalDet = false;
    }
  },
  mounted() {
    this.getAllOrganization();
    this.submitForm(1);
  }
};
</script>


<style lang="less" scoped>
@import "./index";
</style>

<style scoped>
.ivu-form .ivu-form-item-label {
  font-size: 16px;
}
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-icon-ios-close:before,
.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>